<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/txx.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <my-header></my-header>
    <main class="c900 el-card">
        <div class="flex" style="align-items: stretch">
            <div class="left">
                <h3>{{carDetail.brand}} <small>{{carDetail.model}}</small></h3>
                <el-carousel arrow="always">
                    <el-carousel-item  v-for="image in carDetail.photo"><img :src="image.path"></el-carousel-item>
                </el-carousel>
                <div class="flex" style="padding-block: 20px">
                    <el-rate v-model="rate"></el-rate>
                    <div class="price">￥{{carDetail.price}}<small>元/天</small></div>
                    <div class="intro">
                        <p v-for="temp in  carDetail.intro.split('\r\n')"> {{temp}}</p>
                    </div>
                </div>
            </div>
            <div class="right">
                <h4 style="margin-left: 20px;margin-top: 68px">选择用车时间</h4>
                <el-calendar v-model="value">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div style="height: 100%" v-if="fixedDates.find(d=>d==data.day)"
                             :style="{backgroundColor: '#ddd'}">
                            <label style="font-size: 0.7em"> {{ data.day.split('-')[2] }}</label>
                        </div>
                        <div style="height: 100%" v-else
                             :style="{backgroundColor: dates.find(d=>d==data.day)?'#09f':'#fff',
                                                color: dates.find(d=>d==data.day)?'#fff':data.type=='current-month'?'initial':'#ddd'}">
                            <input type="checkbox" v-model="dates" :value="data.day" :id="data.day" style="display: none">
                            <label style="font-size: 0.7em" :for="data.day"> {{ data.day.split('-')[2] }}</label>
                        </div>
                    </template>
                </el-calendar>
                <div class="flex">
                    <div class="flex price" style="margin-left: 20px">
                        <small style="color: #0a68b1">合计:</small>￥900<small>元</small>
                    </div>
                    <a href="orders.html" class="abtn" @click.prevent="commit">现在预订</a>
                </div>
            </div>
        </div>
        <div style="border:1px solid #e5eef8; margin: 20px">
            <h3 style="background-color: #ccccff55; padding: 20px;margin: 0px">评论</h3>
            <div class="flex" style="padding: 20px;align-items: start; border-top: 1px solid #e5eef8">
                <el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
                <div style="flex-grow: 1; margin-left: 20px">
                    <div class="flex">
                        <span style="color: #1e50a2;">張三</span>
                        <small>1小時前</small>
                    </div>
                    <p>車子不錯...</p>
                </div>
            </div>
            <div class="flex" style="padding: 20px;align-items: start; border-top: 1px solid #e5eef8">
                <el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
                <div style="flex-grow: 1; margin-left: 20px">
                    <div class="flex">
                        <span style="color: #1e50a2;">李四</span>
                        <small>1小時前</small>
                    </div>
                    <p>駕駛體驗很好...</p>
                </div>
            </div>
            <div class="flex" style="padding: 20px;align-items: start; border-top: 1px solid #e5eef8">
                <el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
                <div style="flex-grow: 1; margin-left: 20px">
                    <textarea name="" id="" cols="30" rows="6" style="width: 100%"></textarea>
                    <div style="text-align: right">
                        <el-button>发表</el-button>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data: {
            value: new Date(),
            dates: [],
            rate: 4,
            //images:[],
            carDetail:{
                brand:"",intro:"",photo:"",model:""
            },
            fixedDates:[]
        },
        created(){
            //获取地址栏的参数   第一种方法
            /*  let id=location.search;
              id=id.substring("?id=".length);*/
            //第二种方法
            let id=new URLSearchParams(window.location.search).get("id");
            //let id=params.get("id");
            console.log(id);
            //发一次请求查询详情  关联查询
            axios.get("txx/car/selectCarDetail?id="+id).then(res=>{
                console.log(res);
                this.carDetail=res.data;
                this.rate=res.data.stars;

            })
            this.queryByDays();

        },
        methods:{
            a(){},
            commit(){
                this.$confirm("请确认是否要提交订单?","系统提示").then(()=>{
                    let cid = location.search.substring(4);
                    let dateStr = this.dates.join(",");
                    axios.get("txx/lease/commit",{
                        params:{
                            cid: cid,
                            days: dateStr
                        }
                    }).then(res=>{
                        if(res.data.code == 1){
                            location.href = "orders.html";
                        } else {
                            this.$alert(res.data.msg);
                        }
                    });
                }).catch((e)=>{
                    console.error(e);
                    this.$message("取消操作!");
                })
            },
            queryByDays(){
                let cid = location.search.substring(4);
                axios.get("txx/lease/queryByDays",{
                    params: {
                        days:this.value.toISOString(),
                        cid: cid
                    }
                }).then(res=>{
                    // res.data => [{day:...},{day:...},{day:...}]
                    // map => object => string   [stirng,stirng,stirng,stirng]
                    // map => string => []    => [[],[],[],[]]
                    // flatMap 摊平
                    // java .stream
                    if(res.data.length>0){
                        this.fixedDates = res.data.map(lease=>lease.days)
                            .flatMap(days=>days.split(","))
                    }
                });
            }
        }
    })
</script>
</body>
</html>
